<template>
	<div class="panorama2">
		<div id="main" style="width: 372px;height: 267px;"></div>
	</div>
</template>

<script>
	export default {
		name: 'panorama2',
		mounted(){
			this.getList()
		},
		methods: {
			async getList(){
				var dt = {
					"params": {
					        "normGuid": "fc07eab3-24be-4d80-a77a-be5562553c11",
					        "fieldList": []
					    }
				};
				const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...aaa}
				this.cockpitData=result.cockpitData
				this.$nextTick(()=>{
					this.myEcharts();
				})
			},
			myEcharts() {
				let indicatorData=[]
				for(let item of this.cockpitData){
					let temp = {
						name:item.index_level_one,
						max:1,
					}
					indicatorData.push(temp)
				}
				// console.log(indicatorData)
				let zhejData=this.cockpitData.map(item=>{
					return item.model_value
				})
				let quangData=this.cockpitData.map(item=>{
					return item.mst_value
				})
				let myChart = this.$echarts.init(document.getElementById('main'));
				let myColor =['#00FFFF','#FF9100'];
				//配置图表
				var option = {
					// backgroundColor: 'rgba(3, 16, 38, 0.71)',
					 tooltip: {
					    trigger: 'axis'
					  },
					legend: {
					    top: 25,
					    right: 10,
					    icon: 'circle',
						orient: "vertical",
					    itemWidth: 8, // 图例标记的图形宽度。[ default: 25 ]
					    itemHeight: 8, // 图例标记的图形高度。[ default: 14 ]
					    itemGap: 9, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
					    textStyle: {
					      fontSize: 15,
					      color: '#DFF8FF',
					    },
					    data: ['全国', '浙江'],
					  },
					radar: {
						center: ["45%", "55%"],
						radius: "70%",
						indicator:indicatorData,
						 axisName: {
						    fontSize: 16,
						    color: '#FFFFFF',
							// align:"center",
							formatter:function(value,indicator){
								// console.log(value)
								// return value
								if(value=='供应链完整度'){
									return '供应链\n完整度'
								}else if(value=='产品转化度'){
									return '产品 \n转化度'
								}else{
									return value
								}
							}
						},
						nameGap: 12
					},

					series: [{
						name: '全国',
						type: 'radar',
						tooltip: {
						    trigger: 'item'
						},
						symbol: "circle",
						symbolSize: 7,
						itemStyle:{
						    borderWidth:3,
							color:myColor[0],
						},
						lineStyle: {
						    
						},
						// data:[[80, 90, 90, 50,90]],
						data:[quangData]
					},
					{
						name: '浙江',
						type: 'radar',
						tooltip: {
						    trigger: 'item'
						},
						symbol: "circle",
						symbolSize: 7,
						itemStyle:{
						    borderWidth:3,
							color:myColor[1],
						},
						lineStyle: {
						    
						},
						// data:[[50, 60, 75, 25,75]]
						data:[zhejData]
					}]
				};
				myChart.setOption(option);
			}
		}
	}
</script>


<style>

</style>
